<template>
  <div class="write-comment-container">
    <!-- <div
      class="input-text"
      contenteditable="plaintext-only"
      @input="changeText"
      @focus="handleFocus"
      @blur="handleBlur"
      v-html="value"
    >
      <span class="message" :class="{ show: value === '' }">{{
        placeHolder
      }}</span>
    </div> -->
    <textarea :placeholder="placeHolder" class="input-text" v-model="value" @input="changeHeight" ref="textarea"></textarea>
    <button class="submit" @click="submmit">发布</button>
  </div>
</template>

<script>
import axios from "@/util/axios";
export default {
  name: "WriteComment",
  props: {
    isComment: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      value: "",
      showPlaceHolder: true,
    };
  },
  methods: {
    changeText($event) {
      this.value = $event.target.innerText;
    },
    handleFocus() {
      this.showPlaceHolder = false;
    },
    handleBlur() {
      this.showPlaceHolder = true;
    },
    submmit() {
      //发射事件给父组件，提交评论
      this.$emit('submmit',this.value)
    },
    //让textarea自适应高度，不出现滚动条
    changeHeight() {

      this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight+ 'px'
  
    },
  },
  computed: {
    placeHolder() {
      let message = this.isComment ? "请写下你的评论..." : "回复";
      if (this.value === "" && this.showPlaceHolder) return message;
      else return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.write-comment-container {
  display: flex;
  align-items: flex-end;
  padding: 1rem 2rem;
  min-height: 3.6rem;
  .input-text {
    min-height: 3.6rem;
    height: 3.6rem;
    width: 85%;
    padding: 0.6rem 1.2rem;
    margin-right: 1rem;
    border: 0.1rem solid #8590a6;
    border-radius: 0.3rem;
    line-height: 1.6;
    resize: none;
    overflow: hidden;
    .message {
      color: #8590a6;
      display: none;
    }
    .show {
      display: block;
    }
    &:focus {
      outline: none;
    }
  }
  .submit {
    height: 3.6rem;
    width: 10%;
    border-radius: .3rem;
    background-color: #0084ff;
    color: #fff;
  }
}
</style>